<template>
	<view class="">

		<Loading class="loading" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>

		</cu-custom>

		<scroll-view scroll-y="true" :style="{height:scrollH+'px'}">
			<view class="option-list" v-for="(item,index) in list" :key="index">

				<view class="head-option-box bg-white align-center flex padding-sm justify-between"
					@click="changeStatus(index)">
					<view> <text> {{item.dayKey || ""}}</text> <text
							class="padding-sm">{{item.dayOfWeekStr || ""}}</text> {{item.matchCount || ""}}场比赛</view>
					<text class="cuIcon-right" :class="item.status?'transfor-option':''"></text>
				</view>

				<view class="option-box  padding-sm" v-if="item.status">
					<view class=" padding card-type1" v-for="(match,i) in item.matches" :key="i">
						<view class="grid col-5   text-center head-tou text-xl ">
							<view class="">

							</view>
							<view class="text-656565  text-xl1">
								{{match.hostName}}
							</view>
							<view class="">
								vs
							</view>
							<view class="text-656565 text-xl1">
								{{match.guestName}}
							</view>
						</view>
						<view class="grad-box ">
							<view class="grad-box-left ">
								<view class="grad-left-box middle text-yellow text-center padding-sm flex align-center">
									<text> {{match.teamId}} </text>
									<text>{{match.leagueName}}</text>
									<text>{{timeSplice(match.sellEndTime,1)}} 截止</text>
									<view @click="jumpUrl(match.h5Url)">赛事分析</view>

								</view>
								<view class="grad-left-box1">
									<view class="middle bg-E5E5E5 ">
										0
									</view>
									<view class="middle bg-acc7ee ">
										{{checkRate(match.rate,0)}}
									</view>
								</view>
							</view>

							<view class="grad-box-bodty ">
								<view class="grid col-3    text-center head-tou ">

									<view class="bg-FFFFFF border-gray-top border-gray-right"
										v-for="(s,k) in match.host" @click="selectFn(index,i,s.key)"
										:class="match.select[s.key]?'selected':''" v-if="s.val>0">

										<text>{{ s.key==host.rule[0]?'胜':s.key==host.rule[1]?"平":s.key==host.rule[2]?"负":'' }}</text>
										<text
											:class="match.select[s.key]?'text-white':'text-777777'">{{toFix(s.val)}}</text>
									</view>
									<view class="bg-FFFFFF border-gray-top " v-for="(s,k) in match.host"
										v-if="s.val==0">
										<text v-if="s.key==host.rule[1]">未开售</text>
									</view>

									<view class="bg-FFFFFF border-gray-top border-gray-bottom border-gray-right"
										v-for="(s,k) in match.gust" @click="selectFn(index,i,s.key)" v-if="s.val>0"
										:class="match.select[s.key]?'selected':''">
										{{ s.key==gust.rule[0]?'胜':s.key==gust.rule[1]?"平":s.key==gust.rule[2]?"负":'' }}
										<text :class="match.select[s.key]?'text-white':'text-777777'">{{s.val}}</text>
									</view>
									<view class="bg-FFFFFF border-gray-top " v-for="(s,k) in match.gust"
										v-if="s.val==0">
										<text v-if="s.key==gust.rule[1]">未开售</text>
									</view>

								</view>

							</view>



							<view
								class="grad-box-left middle border-gray-top bg-FFFFFF border-gray-bottom border-gray-right  text-green"
								@click="total(index,i)" :class="match.stoal>0?'selected':''">
								{{match.stoal>0?"已选"+match.stoal+"项":"展开全部"}}
							</view>

						</view>


					</view>

				</view>

			</view>
		</scroll-view>

		<view class="sub-box" id="buttom">
			<view class="flex sub-box1 bg-gray   justify-around">
				<button class="cu-btn text-red bg-white  xl" @click="clear">清空</button>
				<view class="flex sub-box1-box  padding-sm margin-xs ">
					<view class="sub-box1-title text-bold">
						已选{{site}}场
					</view>
					<view class="sub-box1-title text-sm ">
						页面赔率仅供参考
					</view>


				</view>
				<button class="cu-btn bg-red  xl" @click="nextTo">下一步</button>

			</view>
		</view>


	</view>
</template>

<script>
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue";
	export default {
		components: {
			ypNumberBox
		},
		data() {
			return {
				title: "混合投注",
				orderList: [],
				list: [],
				select: [],
				host: {
					rule: ["sheng", "ping", "fu"],
					arr: []
				},
				gust: {
					rule: ["rqSheng", "rqPing", "rqFu"],
					arr: []
				},
				scrollH: 0,
				site: 0,
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',

			}
		},
		onLoad() {
			this.getList();
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#buttom').boundingClientRect(data => {

				this.scrollH = this.WH - this.CustomBar - data.height;

			}).exec();

		},
		methods: {
			selectFn(index, i, atr) {
				let val = this.list[index].matches[i].select[atr];
				let isSet = false;
				if (!val) {
					isSet = true;
					this.list[index].matches[i].select[atr] = isSet;
				} else {
					delete this.list[index].matches[i].select[atr]
				}
				this.list[index].matches[i].stoal = Object.keys(this.list[index].matches[i].select).length;
				this.$set(this.list, index, this.list[index]);
				this.staticSite();

			},
			/**
			 * 统计选择的参数
			 */
			staticSite() {
				let num = 0;
				for (let i in this.list) {
					for (let k in this.list[i].matches) {
						if (Object.keys(this.list[i].matches[k].select).length > 0) {
							for (let j in this.list[i].matches[k].select) {

								let val = this.list[i].matches[k].select[j];
								if (val) {
									this.list[i].matches[k].isSelect = true;
									num++;
									break;
								}
							}
						}
					}
				}
				this.site = num;
			},

			toFix(num) {
				return num.toFixed(2);
			},
			/**
			 * 更新数据
			 */
			update() {
				uni.getStorage({
					key: "footballist",
					success: (d) => {
						for (let i in d.data) {
							for (let k in d.data[i].matches) {
								if (Object.keys(d.data[i].matches[k].selected).length > 0) {

									let select = [],
										l = 0;
									for (let j in d.data[i].matches[k].selected) {
										l++;
										let val = d.data[i].matches[k].selected[j].val;
										let key = d.data[i].matches[k].selected[j].key;
										select[key] = val;
									}
									d.data[i].matches[k].stoal = l;
									d.data[i].matches[k].select = select;
								}
								else{
									d.data[i].matches[k].stoal = 0;
									d.data[i].matches[k].select = [];
								}
							}
						}

						this.list = d.data;
						this.staticSite();
					},
					fail: () => {
						uni.showModal({
							title: "温馨提示",
							content: "开小差了",
							showCancel: false,
							success: (e) => {
								if (e.confirm) {
									uni.reLaunch({
										url: "/pages/index"
									})
								}
							}
						})
					}
				})






			},
			updateSite(res, option) {
				this.list[option.index].matches[option.i].select = res;
				let l = 0;
				for (let i in res) {
					if (res[i]) {
						l++;
					}
				}
				this.list[option.index].matches[option.i].stoal = l;
				this.$set(this.list, option.index, this.list[option.index]);
				this.staticSite();
			},
			checkRate(num, type) {
				let n = num;
				switch (type) {
					case 0:
						if (parseInt(num) > 0) {
							n = "+" + num;
						}
						break;
				}
				return n;
			},
			/*
			 *时间截取 
			 */
			timeSplice(time, type) {
				let timeText = time.split(" ");
				switch (type) {
					case 0:
						return timeText[0];
						break;
					case 1:
						let t = timeText[1].split(":");
						return t[0] + ":" + t[1];
						break;
					default:
						return "";
						break;
				}
			},
			/**
			 * 获取数据列表
			 */
			getList() {
				this.$Reques.request(this.$Reques.interface_url.football, "GET", "",true).then((res) => {
					if (res.status == 200) {
						for (let i in res.data.data) {
							let status = false;
							if (i == 0) {
								status = true;
							}
							res.data.data[i].status = status;
						}
						this.list = res.data.data;
						this.spliteData();
						this.isLoading = true;
					} else {
						this.$Reques.showToast(res.message);
					}
				})
			},
			/**
			 * 拆分数据
			 */
			spliteData() {
				for (let k in this.list) {
					for (let j in this.list[k].matches) {
						for (let i in this.list[k].matches[j]) {
							let condtion = {
								host: i == this.host.rule[0] || i == this.host.rule[1] || i == this.host.rule[2],
								gust: i == this.gust.rule[0] || i == this.gust.rule[1] || i == this.gust.rule[2],
							}
							if (typeof this.list[k].matches[j].host == "undefined") {
								this.list[k].matches[j].host = [];
								this.list[k].matches[j].gust = [];
								this.list[k].matches[j].select = [];
								this.list[k].matches[j].stoal = 0;
							};
							if (condtion.host) {
								let dat = {
									key: i,
									val: this.list[k].matches[j][i]
								}
								this.list[k].matches[j].host.push(dat);
							}
							if (condtion.gust) {
								let dat = {
									key: i,
									val: this.list[k].matches[j][i]
								}
								this.list[k].matches[j].gust.push(dat);
							}
						}
					}
				}
			},
			/**
			 * 展开全部
			 */
			total(index, i) {
				let arr = [];
				for (let k in this.list[index].matches[i].select) {
					arr.push({
						key: k,
						val: this.list[index].matches[i].select[k]
					});
				}
				uni.setStorageSync(i + "select" + index, arr);
				uni.setStorage({
					key: "signleDetal",
					data: this.list[index].matches[i],
					success: () => {
						uni.navigateTo({
							url: "/pages/order/expandAll?index=" + index + "&i=" + i
						})
					}
				})
			},

			/**
			 * 打开下拉框
			 * @param {Object} index
			 */
			changeStatus(index) {
				this.$nextTick(() => {
					(this.list[index].status) ? this.list[index].status = false: this.list[index].status = true;
					console.log("status : " + this.list[index].status + " index " + index);
				})
			},
			/**
			 * 继续添加比赛
			 */
			addOrder() {
				let dat = {
					name: "'"
				}
				this.orderList.push(dat);
			},
			/**
			 * 取消删除订单
			 */
			cancelOrder(index) {
				this.orderList.splice(index, 1);
			},
			nextTo() {
				for (let i in this.list) {
					for (let k in this.list[i].matches) {
						this.list[i].matches[k].selected = [];
						if (Object.keys(this.list[i].matches[k].select).length > 0) {
							for (let j in this.list[i].matches[k].select) {
								this.list[i].matches[k].selected.push({
									key: j,
									val: this.list[i].matches[k].select[j]
								})
							}
						}
					}
				}
				uni.setStorage({
					key: "footballist",
					data: this.list,
					success: () => {
						uni.navigateTo({
							url: "/pages/order/batOrder"
						})
					},
					fail: () => {
						uni.showToast({
							title: "出错",
							icon: "none"
						})
					}

				})


			},
			jumpUrl(url) {
				uni.navigateTo({
					url: "/pages/order/openVIew?url=" + url
				})
			},
			/**
			 * 清空
			 */
			clear() {
				for (let k in this.list) {
					for (let j in this.list[k].matches) {

						this.list[k].matches[j].select = [];
						this.list[k].matches[j].stoal = 0;
						this.$set(this.list, k, this.list[k]);

					}

				}
			}

		}


	}
</script>

<style scoped>
	.text-white,
	.text-777777 {
		padding-top: 5rpx;
		margin-left: 5rpx;
	}

	.text-xl1 {
		font-size: 32rpx;
	}

	.selected {
		background-color: red;
		color: white;
	}

	/**
	 * 自定义折叠模板
	 */
	.option-list {
		width: 100%;
	}

	.head-option-box {
		width: 100%;
		height: 80rpx;

	}

	.option-box {
		width: 100%;
		min-height: 200rpx;
	}

	.transfor-option {

		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* Internet Explorer */
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
		/* Opera */
	}



	/**
	 * 表格样式
	 */



	* {
		margin: 0;

	}

	.head-tou {
		min-height: 50rpx;
	}

	.card-type1 {
		border-bottom: 5rpx solid red;
	}

	.head-tou view {
		min-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grad-box {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-wrap: nowrap;
	}

	.grad-box-left {
		width: 25%;
		height: 100%;
		display: flex;
		flex-wrap: nowrap;
		font-size: 22rpx;
	}

	.grad-box-bodty {
		width: 60%;
		height: 100%;
		font-size: 24rpx;

	}

	.grad-box-bodty .grid {
		height: 100%;

	}

	.border-gray-top {

		border-top: 1rpx solid #E1E1E1;
	}

	.border-gray-left {
		border-left: 1rpx solid #E1E1E1;
	}

	.border-gray-right {

		border-right: 1rpx solid #E1E1E1;
	}

	.border-gray-bottom {
		border-bottom: 1rpx solid #E1E1E1;
	}

	.right-box {
		position: relative;
	}

	.right {
		position: absolute;
		float: right;
		right: 0;
		top: 0;
	}

	.grad-left-box {
		width: 70%;
		padding: 10rpx;
		flex-direction: column;
	}

	.grad-left-box,
	.grad-left-box1 {
		height: 100%;
	}

	.grad-left-box1 {
		width: 30%;

	}

	.grad-left-box1 view {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.color-acc7ee {
		background-color: #ACC7FE;
	}

	.cuIcon-roundclosefill {
		font-size: 38rpx;
	}

	.add-button-box {
		width: 50%;
		margin: auto;
	}

	/**
	 * 底部样式
	 */
	.sub-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}

	.sub-box1 {
		padding: 10rpx;
		align-items: center;
	}

	.sub-box1-title {
		width: 100%;
	}

	.sub-box1-box {
		text-align: center;
		flex-direction: column;
	}
</style>
